<template>
  <div class="body">
    <div class="f1">
      <div class="center">
        <div style="height: 20px"></div>
        <div class="wanzhuan_bg">
          <img src="img/wanzhuan_bg.jpg" />
          <h4>玩转舟山</h4>
          <p>海岛上的吃住行...</p>
          <p>感受大海的风情万种</p>
        </div>
      </div>
    </div>
    <div class="f2">
      <div class="center">
        <div class="play">
          <div class="col2-1">
            <div class="icon1"></div>
            <p>海岛必玩</p>
          </div>
          <ul v-if="data">
            <li>
              <img src="img/wz_bg/wz_bg.jpg" />
              <div class="txt">
                <div class="icon2"></div>
                <p>{{data[0].title}}</p>
                <hr />
                <router-link :to="`/zs_play_show?aid=${data[0].aid}`">查看详情</router-link>
              </div>
            </li>
            <li>
              <img src="img/wz_bg/wz_bg2.jpg" />
              <div class="txt">
                <div class="icon3"></div>
                <p>{{data[1].title}}</p>
                <hr />
                <router-link :to="`/zs_play_show?aid=${data[1].aid}`">查看详情</router-link>
              </div>
            </li>
            <li>
              <img src="img/wz_bg/wz_bg3.jpg" />
              <div class="txt">
                <div class="icon4"></div>
                <p>{{data[2].title}}</p>
                <hr />
                <router-link :to="`/zs_play_show?aid=${data[2].aid}`">查看详情</router-link>
              </div>
            </li>
            <li>
              <img src="img/wz_bg/wz_bg4.jpg" />
              <div class="txt">
                <div class="icon5"></div>
                <p>徒步</p>
                <hr />
                <a href="#">查看详情</a>
              </div>
            </li>
            <li>
              <img src="img/wz_bg/wz_bg5.jpg" />
              <div class="txt">
                <div class="icon6"></div>
                <p>海钓天堂</p>
                <hr />
                <a href="#">查看详情</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    }
  },
  mounted () {
    this.axios.get(`/activity/show`).then(res=>{
      console.log('查询所有活动:',res);
      this.data = res.data
      console.log(this.data[0].title);
    })
  },
};

</script>
<style scoped src="../assets/css/zsPlay.css">

</style>
<style lang="scss" scoped></style>
